<template>
    <div v-loading="loading">
        <div class="vs-table-box orderStatus">
            <div class="left_order_status">
                订单状态：
                <span v-if="orderType == 1">待发货</span>
                <span v-else-if="orderType == 2">待收货</span>
                <span v-else-if="orderType == 3">待领取</span>
                <span v-else-if="orderType == 4">已完成</span>
            </div>
            <div class="right_money">
                <el-button type="primary" @click="confirmReceiving" v-if="orderType == 2">确认收货</el-button>
                <el-button
                    type="primary"
                    @click="
                        dialogVisible = true;
                        code = '';
                    "
                    v-if="orderType == 3"
                    >确认核销</el-button
                >
            </div>
        </div>
        <div class="vs-table-box" style="padding: 20px 100px">
            <el-descriptions border :column="3" title="顾客信息" style="margin-top: 20px">
                <!-- 非会员订单不显示会员卡号 -->
                <el-descriptions-item label="会员卡号" v-if="order.user.vip_no">{{ order.user.vip_no }}</el-descriptions-item>
                <el-descriptions-item label="姓名">{{ order.user.realname }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ order.user.gender | typeGender }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ order.user.phone }}</el-descriptions-item>
                <el-descriptions-item label="积分">{{ order.user.integral }}</el-descriptions-item>
            </el-descriptions>

            <div class="tit">订单信息</div>
            <div class="order_info">
                <div class="order_info_top">
                    <div class="img" style="width: 200px; height: 230px">
                        <el-image v-if="order.ordersIntegralGoods" style="width: 200px; height: 230px" :src="order.images[0]" :preview-src-list="order.images"> </el-image>
                    </div>
                    <div v-if="order.ordersIntegralGoods" class="order_info_top_right">
                        <div>商品系列 ： {{ order.ordersIntegralGoods[0].goodsIntegral.title }}</div>
                        <div>花费积分 ： {{ order.integral }}</div>
                        <div>订单数量 ： {{ order.number }}</div>
                        <div>订单编号 ： {{ order.out_trade_no }}</div>
                        <div>自提门店 ： {{ order.store.title }}</div>
                        <div v-if="order.create_time">下单日期 ： {{ order.create_time }}</div>
                    </div>
                </div>
            </div>

            <el-descriptions border :column="1" title="物流信息" style="margin-top: 20px">
                <template v-if="order.admin_express_type == 2">
                    <el-descriptions-item label="物流公司">{{ order.express_title }}</el-descriptions-item>
                    <el-descriptions-item label="物流单号">{{ order.express_no }}</el-descriptions-item>
                    <el-descriptions-item v-if="order.delivery_time" label="发货时间">
                        {{ new Date(order.delivery_time * 1000) | parseTime }}
                    </el-descriptions-item>
                </template>
                <template v-else>
                    <el-descriptions-item label="物流方式">自提</el-descriptions-item>
                </template>
            </el-descriptions>

            <el-descriptions border :column="1" title="操作信息" style="margin-top: 20px" v-if="orderType == 4">
                <el-descriptions-item v-if="order.receive_time" label="收货时间">
                    {{ new Date(order.receive_time * 1000) | parseTime }}
                </el-descriptions-item>
                <el-descriptions-item label="核销码" v-if="orderType == 4">{{ order.code }}</el-descriptions-item>
                <el-descriptions-item label="核销时间" v-if="orderType == 4 && order.write_time">
                    {{ new Date(order.write_time * 1000) | parseTime }}
                </el-descriptions-item>
            </el-descriptions>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="500px" :before-close="dialogBeforeClose">
            <div slot="title" class="dialog_tit">
                <span>积分商品核销</span>
            </div>
            <div style="padding: 0 40px">
                <el-form ref="form" :model="form">
                    <el-form-item>
                        <div style="width: 300px; display: flex">
                            <el-input v-model="code" placeholder="请输入核销码"></el-input>
                            <!-- <el-button style="margin-left:10px">确认核销</el-button> -->
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="isBtn" @click="subitm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                code: '',
                tableData: [{}],
                dialogVisible: false,
                isBtn: false, //1.待收货  2.待领取  3.已完成
                orderType: 1, //订单状态\r\n1: 待发货\r\n2: 待收货\r\n3: 待领取\r\n4: 已完成 5:已取消 -1：已删除'
                loading: false,
                order: {
                    user: {},
                    store: {},
                },
                form: {},
            };
        },
        created() {
            let { id, type } = this.$route.query;
            if (id) {
                this.goodsIntegralGetOrders(id);
            }
        },
        methods: {
            rtImages(images, num) {
                if (images.indexOf(',') != -1) {
                    if (num) {
                        return images.split(',');
                    } else {
                        return images.split(',')[0];
                    }
                } else {
                    if (num) {
                        return images.split(',');
                    } else {
                        return images;
                    }
                }
            },
            async subitm() {
                if (!this.code) return this.$message.error('请输入核销码');
                this.isBtn = true;
                let { code, data } = await this.$Http.goodsIntegralWriteOff({
                    code: this.code,
                    orders_integral_id: this.order.id,
                });
                this.isBtn = false;
                if (code) {
                    this.dialogVisible = false;
                    this.$message.success('核销成功!');
                    this.goodsIntegralGetOrders(this.order.id);
                }
            },
            async confirmReceiving() {
                this.$msgbox({
                    title: '确认收货',
                    message: '是否确认收货？',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: async (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            let { code, data } = await this.$Http.goodsIntegralConfirmReceiving({ orders_integral_id: this.order.id });
                            if (code) {
                                this.$message.success('确认收货成功!');
                                this.utils.backPage();
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    },
                })
                    .then((action) => {})
                    .catch(() => {});
            },
            async goodsIntegralGetOrders(id) {
                this.loading = true;
                let { code, data } = await this.$Http.goodsIntegralGetOrders({ id });
                this.loading = false;
                if (code) {
                    this.order = data;
                    this.order.images = data.ordersIntegralGoods[0].goodsIntegral.images.split(',');
                    this.orderType = data.status;
                }
            },
            dialogBeforeClose() {
                this.dialogVisible = false;
            },
        },
    };
</script>

<style>
    .disabled .el-upload--picture-card {
        display: none !important;
    }
</style>
<style lang="scss" scoped>
    .orderStatus {
        padding: 40px 40px;
        display: flex;
        align-items: center;

        .left_order_status {
            display: flex;
            align-items: center;

            > span {
                margin-left: 30px;
                font-size: 22px;
                color: red;
            }
        }

        .right_money {
            margin-left: auto;
            display: flex;
            align-items: center;

            > div {
                display: flex;
            }

            > div:first-child {
                margin-right: 40px;
                color: red;
            }
        }
    }

    .tit {
        margin: 20px 0;
        font-size: 16px;
        font-weight: 700;
    }

    .money {
        display: flex;
        flex-direction: column;

        > div {
            padding: 0 40px;
            margin-top: 10px;
            text-align: right;
        }
    }

    .dialog_tit {
        padding-bottom: 10px;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
    }

    .order_info {
        display: flex;
        flex-direction: column;
        padding: 20px 40px;

        .order_info_top {
            display: flex;

            .img {
                height: 150px;
                width: 300px;
                background-color: rgba($color: #000000, $alpha: 0.2);
            }

            .order_info_top_right {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 20px;
                padding: 15px 0;
                font-size: 14px;
                color: rgba($color: #000000, $alpha: 0.7);
            }
        }

        .order_info_bottom {
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            line-height: 30px;
            font-size: 14px;
            color: rgba($color: #000000, $alpha: 0.7);
        }
    }
</style>
